import { defineComponent } from 'vue'

export default defineComponent({
  name: 'compression',
  setup () {
    return () => (
      <div class='contentCenter'>
        <div>
          <h3>文件压缩插件</h3>
          <p>
            compression-webpack-plugin支持对js、css、png、jpg文件的压缩，
            minRatio取一个合适的值，不是越小越好，需要服务器支持解析
          </p>
        </div>

        <div className="code">
          <div>npm i compression-webpack-plugin -D</div>

          <pre>

            ...<br />
            const CompressionWebpackPlugin = require('compression-webpack-plugin')<br />
            const productionGzipExtensions = ['js', 'css','png','jpg']<br />
            <code>
              {` module.exports = {
      .......
    configureWebpack: {
      plugins : [
      // 配置compression-webpack-plugin压缩
        new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 1024*20,
        minRatio: 0.8
    })
    ]}
    .......
  } `}
            </code>
          </pre>
        </div>
      </div>
    )
  }
})